<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
		 crossorigin="anonymous"> -->

		<link rel="stylesheet" type="text/css" href="../static/dist/css/bootstrap.css" />
	</head>
	<style type="text/css">
		body,
		html {
			background-color: #FDFDFD;
			height: 100%;
			padding: 0;
		}

		.container-fluid {
			/* margin-top: -60px; */
			height: 100%;
			display: flex;
			align-items: center;
		}

		.my-form {
			margin: 0 auto;
			/* width: 100%; */
			border: solid #cfcfcf 1px;
			border-radius: 5px;
			box-shadow: 1px 3px 10px #337AB7;
		}

		.my-form .form-title {
			width: 100%;
			height: 60px;
			background-color: rgba(51, 122, 183, 0.2);
			text-align: center;
			line-height: 60px;
			font-size: 30px;
			margin-bottom: 20px;
			color: #337AB7;
		}

		.my-form .userErr {
			margin-bottom: 10px;
			font-size: 14px;
			height: 18px;
			color: #FF0000;
		}

		.my-form .input {
			margin: 10px 10px;
		}

		.my-form .input-group,
		.my-form .input-group button {
			width: 100%;
		}

		.userMsg {
			margin-top: 10px;
			border-bottom: solid 1px #dedede;
		}

		.userMsg span {
			margin: 5px 0 20px;
			float: right;
			opacity: 0.5;
		}

		.div-img input {
			border-radius: 5px !important;
		}

		.div-img input::placeholder {
			font-size: 16px;
		}

		.mySpan-img #code {
			text-align: center;
			font-size: 28px;
			width: 130px;
			line-height: 46px;
			height: 100%;
			display: block;
			background-color: #EEEEEE;
		}

		span.mySpan-img {
			padding: 0 0 0 40px !important;
			background-color: #FDFDFD !important;
			border: none !important;
		}

		.has-primary .input-group-addon {
			color: #337AB7;
			background-color: rgba(51, 122, 183, 0.1);
			border: solid 1px #337AB7;
		}

		.has-primary .form-control {
			border: solid 1px #337AB7 !important;
			margin-left: -1px;
		}

		.regist {
			text-align: right;
			margin-top: 3px;
		}

		.regist span {
			opacity: 0.8;
		}
	</style>
	<body>
		<div class="container-fluid">
			<form class="form-horizontal my-form">
				<div class="form-title">
					账号绑定
				</div>
				<div class="input">
					<div class="input-group input-group-lg has-primary">
						<span class="input-group-addon"><strong>账号</strong></span>
						<input type="text" value="" class="form-control" placeholder="请输入账号" id="username" aria-describedby="sizing-addon1">
					</div>
					<div class="userErr" id="login_user"></div>
					<div class="input-group input-group-lg has-primary">
						<span class="input-group-addon"><strong>密码</strong></span>
						<input type="password" value="" class="form-control" id="password" placeholder="请输入密码" aria-describedby="sizing-addon1">
					</div>
					<div class="userErr" id="login_psd"></div>
					<div class="input-group input-group-lg has-primary div-img">
						<input type="text" id="login_code" class="form-control" placeholder="请输入验证码" aria-describedby="sizing-addon1">
						<span class="input-group-addon mySpan-img">
							<span id="code"><strong>验证码</strong></span>
						</span>
					</div>
					<div class="userErr" id="codeErr"></div>
					<br><br>
					<div class="input-group input-group-lg">
						<button id="submit" type="button" class="btn btn-primary btn-lg">登录</button>
					</div>
					<div class="userMsg"><span>提示：忘记账号密码请联系管理员.</span></div>
				</div>
			</form>
		</div>
	</body>
	<script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
	<script>
		function	getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]); return null;
		}
		var flag = getUrlParam("state")
		if(flag == "313"){
			window.location.href = "wxLogins.html?flag=Y"
		}
		// $(function() {
		// 	var reg = new RegExp("(^|&)state=([^&]*)(&|$)");
		// 	var param = window.location.search.substr(1).match(reg);
		// 	if (param != null) {
		// 		window.location.href = "wxLogins.html?flag=Y"
		// 	}
		// })
		var login_code = $("#login_code")
		var code = 99;

		function codes() {
			var ranColor = null
			var ranColor2 = null
			while (ranColor == ranColor2) {
				ranColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); //随机生成颜色
				ranColor2 = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
			}
			var num1 = Math.floor(Math.random() * 10);
			var num2 = Math.floor(Math.random() * 10);
			code = num1 + num2;

			$("#code").html(num1 + "+" + num2 + "=?");
			if ($("#code").hasClass("nocode")) {
				$("#code").removeClass("nocode");
				$("#code").addClass("code");
			}
			$("#code").css('background', ranColor);
			$("#code").css('color', ranColor2);
		}

		codes()

		function code_flag() {
			if (login_code.val() == code && code != 99) {
				$("#codeErr").text("")
			} else {
				$("#codeErr").text("验证码错误请重新输入！")
			}

		}
		$("#code").on('click', function() {
			codes()
			$("#codeErr").text("")
		})
		login_code.blur(function() {
			setInterval(function() {
				code_flag
			}, 1000)
		});

		$("#submit").click(function() {

			var usn = $("#username").val()
			var psd = $("#password").val()
			var ipucode = $("#login_code").val()
			var data = {
				username: usn,
				password: psd
			}
			data = JSON.stringify(data)
			if (ipucode != code) { //验证码不对不给提交
				code_flag()
				return
			}
			if (usn == "" || usn == null) {
				$("#login_user").text("请输入账号")
				return
			}
			if (psd == "") {
				$("#login_psd" || psd == null).text("请输入密码")
				return
			}
			$.ajax({
				type: 'POST',
				url: "/face/login/band",
				data: data,
				contentType: "application/json;charset=UTF-8",
				dataType: 'json',
				success: function(resp) {
					if (typeof("sdsd") == typeof(resp)) {
						var resp = eval('(' + resp + ')')
					}
					if (resp.code == "302") {
						console.log(resp)
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
					}

					if (resp.code == 309) {
						$("#login_psd").text("账号或密码错误")
						return
					}
					console.log(resp.code + ";" + resp.message + ";" + resp.data)

					$("#login_psd").text(resp.message)
					if (resp.code == 100) {
						window.location.href = "./wxLogins.html?flag=S"
					}else if(resp.code = 313){
						window.location.href = "wxLogins.html?flag=N"
					} else {
						$("#login_psd").text(resp.message)
						var r = confirm("绑定失败-重新绑定" + resp.message);
						if (r) {
							window.location.href =
								"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
						}
					}
				},
				error: function(error) {
					// confirm("Error")
					console.log(error)
					$("#login_psd").text(error)
					var r = confirm("绑定失败-重新绑定，" + error.message);
					if (r) {
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
					}
				}
			})
		})
	</script>
</html>
